<template>
	<view class="content">
		<!-- 头部Logo -->
		<view class="header">
			<image src="/static/tushu-login/logo.png" alt="logo"></image>
		</view>
		
		<!-- 表单列表（仅保留：手机号、密码） -->
		<view class="list">
			<!-- 手机号输入框 -->
			<view class="list-call">
				<image class="img" src="/static/tushu-login/1.png" alt="手机号图标"></image>
				<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="手机号"/>
			</view>
			
			<!-- 密码输入框（保留「密码显示/隐藏」功能） -->
			<view class="list-call">
				<image class="img" src="/static/tushu-login/2.png" alt="密码图标"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码"
					   :password="!showPassword"/>
				<image class="img" :src="showPassword ? '/static/tushu-login/op.png' : '/static/tushu-login/cl.png'"
					   @tap="display" alt="密码显示切换"></image>
			</view>
		</view>
		
		<!-- 注册按钮 -->
		<view class="button-login" hover-class="button-hover" @tap="bindLogin">
			<text>注册</text>
		</view>

		<!-- 添加跳转到登录页面的链接 -->
		<view class="register-link">
			<text @tap="goToLogin">已有账号？立即登录</text>
		</view>
	</view>
</template>

<script>
    // 后端基础地址
    const API_BASE_URL = "http://localhost:3001/api/user";
    
    export default {
		name: 'Reg',
		data() {
			return {
				phone: '',          // 手机号
				password: '',       // 密码
				showPassword: false // 密码显示/隐藏状态
			};
		},
		methods: {
			// 密码显示/隐藏切换
			display() {
				this.showPassword = !this.showPassword;
			},

			// 跳转到登录页面
			goToLogin() {
				uni.redirectTo({
					url: '/pages/login/login' // 根据你的实际页面路径调整
				});
			},
			
			// 注册按钮点击逻辑
			bindLogin() {
				// 1. 手机号校验
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
						duration: 1500
					});
					return;
				}
				
				// 2. 密码校验
				if (this.password.length < 6 || this.password.length > 32) {
					uni.showToast({
						icon: 'none',
						title: '密码长度需为6-32位',
						duration: 1500
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '注册中...',
					mask: true
				});

                // 调用注册接口
                uni.request({
                    url: API_BASE_URL + '/register',
                    method: 'POST',
					data: { 
						phone: this.phone, 
						password: this.password 
					},
					header: { 
						'Content-Type': 'application/json'
					},
					success: (res) => {
						// 隐藏加载框
						uni.hideLoading();
						
						console.log('注册响应:', res);
						
						// 根据你的后端响应结构调整
						if (res.statusCode === 200 && res.data.code === 200) {
							uni.showToast({
								title: '注册成功',
								icon: 'success',
								duration: 1500,
								success: () => {
									// 注册成功后跳转到登录页面
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/login/login'
										});
									}, 1500);
								}
							});
						} else {
							// 注册失败
							const errorMsg = res.data.msg || res.data.message || '注册失败，请重试';
							uni.showToast({
								icon: 'none',
								title: errorMsg,
								duration: 2000
							});
						}
					},
					fail: (err) => {
						// 隐藏加载框
						uni.hideLoading();
						console.error('请求失败:', err);
						uni.showToast({
							icon: 'none',
							title: '网络错误，请重试',
							duration: 2000
						});
					},
					complete: () => {
						// 如果需要，可以在这里执行一些完成后的操作
					}
				});
			}
		}
	}
</script>

<style scoped>
	/* 页面容器：全屏垂直居中，底部留空避免内容贴底 */
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		padding: 0 20rpx 80rpx;
		box-sizing: border-box;
	}
	
	/* 头部Logo */
	.header {
		width: 161rpx;
		height: 161rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(63, 205, 235, 0.3);
		border-radius: 50%;
		margin: 0 auto 80rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header image {
		width: 90%;
		height: 90%;
		object-fit: contain;
	}
	
	/* 表单容器 */
	.list {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		margin-bottom: 60rpx;
	}
	
	/* 输入框行 */
	.list-call {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		border-bottom: 0.5px solid #f2f2f2;
	}
	
	/* 输入框图标 */
	.list-call .img {
		width: 40rpx;
		height: 40rpx;
		object-fit: contain;
	}
	
	/* 输入框 */
	.list-call .sl-input {
		flex: 1;
		font-size: 32rpx;
		margin-left: 16rpx;
		color: #333;
		border: none;
		outline: none;
		background: transparent;
	}
	.list-call .sl-input::placeholder {
		color: #ccc;
		font-size: 30rpx;
	}
	
	/* 注册按钮 */
	.button-login {
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
		width: 100%;
		max-width: 470rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(63, 205, 235, 0.4);
		border-radius: 50rpx;
		text-align: center;
		margin: 0 auto;
		touch-action: manipulation;
		transition: all 0.2s ease;
	}
	
	/* 按钮 hover 效果 */
	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.95), rgba(188, 226, 158, 0.95));
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(63, 205, 235, 0.3);
		transform: translateY(2rpx);
	}

	/* 注册链接样式 */
	.register-link {
		text-align: center;
		margin-top: 40rpx;
	}

	.register-link text {
		color: #1E90FF;
		font-size: 28rpx;
		text-decoration: underline;
	}
</style>